<template>
  <view class="content">
    <view style="padding: 20px;">
		<u-button type="primary" text="确定"></u-button>
		<u-button type="primary" :plain="true" text="镂空"></u-button>
		<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
		<u-button type="primary" :loading="true" loadingText="加载中"></u-button>
		<u-button type="primary" icon="map" text="图标按钮"></u-button>
		<u-button type="primary" shape="circle" text="按钮形状"></u-button>
		<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
		<u-button type="primary" size="small" text="大小尺寸"></u-button>
	</view>
    <!-- 导航栏 -->
    <swiper-tab-head
      :tabBars="tabBars"
      :tabIndex="tabIndex"
      @tabtap="tabtap"
    ></swiper-tab-head>
    <view class="uni-tab-bar">
      <swiper
        class="swiper-box"
        :style="{ height: swiperHeight + 'px' }"
        :current="tabIndex"
        @change="tabChange"
      >
        <swiper-item v-for="(items, index) in newsList" :key="index">
          <scroll-view scroll-y class="" @scrolltolower="loadmore(index)">
            <template v-if="items.list.length > 0">
              <!-- 图文列表 -->
              <block v-for="(item, indey) in items.list" :key="indey">
                <index-list :item="item" :index="index"></index-list>
              </block>
              <!-- 上拉加载 -->
              <load-more :loadtext="items.loadtext"></load-more>
            </template>
            <template v-else>
              <!-- 无内容默认 -->
              <no-thing></no-thing>
            </template>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import indexList from "../../components/index/index-list.vue";
import swiperTabHead from "../../components/index/swiper-tab-head.vue";
import loadMore from "../../components/common/load-more.vue";
import noThing from "../../components/common/no-thing.vue";
export default {
  data() {
    return {
      swiperHeight: 500,
      tabIndex: 0,
      tabBars: [
        {
          name: "关注",
          id: "guanzhu",
        },
        {
          name: "推荐",
          id: "tuijian",
        },
        {
          name: "体育",
          id: "tiyu",
        },
        {
          name: "热点",
          id: "redian",
        },
        {
          name: "财经",
          id: "caijing",
        },
      ],

      newsList: [
        {
          loadtext: "上拉加载更多",
          list: [
            {
              userpic: "../../static/image/userpic/12.jpg",
              username: "昵称",
              isfollow: false,
              title: "我是标题",
              type: "img", // img:图文 , video:视频
              titlepic: "../../static/image/datapic/11.jpg",
              infonum: {
                status: 0, // 0 没有操作,1 顶 ,2 踩
                dingnum: 11,
                cainum: 11,
              },
              commentnum: 10,
              sharenum: 10,
            },
            {
              userpic: "../../static/image/userpic/12.jpg",
              username: "昵称",
              isfollow: false,
              title: "我是标题",
              type: "img", // img:图文 , video:视频
              titlepic: "../../static/image/datapic/11.jpg",
              infonum: {
                status: 0, // 0 没有操作,1 顶 ,2 踩
                dingnum: 11,
                cainum: 11,
              },
              commentnum: 10,
              sharenum: 10,
            },
            {
              userpic: "../../static/image/userpic/12.jpg",
              username: "昵称",
              isfollow: false,
              title: "我是标题",
              type: "img", // img:图文 , video:视频
              titlepic: "../../static/image/datapic/11.jpg",
              infonum: {
                status: 0, // 0 没有操作,1 顶 ,2 踩
                dingnum: 11,
                cainum: 11,
              },
              commentnum: 10,
              sharenum: 10,
            },
            {
              userpic: "../../static/image/userpic/12.jpg",
              username: "昵称",
              isfollow: false,
              title: "我是标题",
              type: "video", // img:图文 , video:视频
              titlepic: "../../static/image/datapic/11.jpg",
              playnum: "20w",
              long: "2:47",
              infonum: {
                status: 0, // 0 没有操作,1 顶 ,2 踩
                dingnum: 11,
                cainum: 11,
              },
              commentnum: 10,
              sharenum: 10,
            },
          ],
        },
        {
          loadtext: "上拉加载更多",
          list: [],
        },
        {
          loadtext: "上拉加载更多",
          list: [],
        },
        {
          loadtext: "上拉加载更多",
          list: [],
        },
        {
          loadtext: "上拉加载更多",
          list: [],
        },
      ],
      active: 1,
    };
  },
  methods: {
    onChange(event) {
    wx.showToast({
      title: `切换到标签 ${event.detail.name}`,
      icon: 'none',
    });
  },
    // 点击
    tabtap(index) {
      this.tabIndex = index;
      console.log(this.$store);
    },
    // 滑动
    tabChange(e) {
      this.tabIndex = e.detail.current;
    },
    // 上拉加载
    loadmore(index) {
      if (this.newsList[index].loadtext !== "上拉加载更多") {
        return;
      }
      // 修改状态
      this.newsList[index].loadtext = "拼命加载中. . .";
      setTimeout(() => {
        this.newsList[index].loadtext = "人家是有底线的 Ծ ‸ Ծ";
      }, 1000);
    },
  },
  components: {
    noThing,
    loadMore,
    indexList,
    swiperTabHead,
  },
  onLoad() {
    console.log(this.newsList);
    // 解决滚动高度问题
    uni.getSystemInfo({
      success: (res) => {
        let height = res.windowHeight - uni.upx2px(100);
        this.swiperHeight = height;
      },
    });
  },
  // 监听搜索框点击事件
  onNavigationBarSearchInputClicked() {
    this.$Router.push({ name: "search" });
  },
  // 监听发布按钮点击事件
  onNavigationBarButtonTap(e) {
    switch (e.index) {
      case 0:
        // 签到
        uni.showToast({
          title: "暂不支持",
          icon: "none",
        });
        break;
      case 1:
        // 发布
        this.$Router.push({ name: "publish" });
        break;
    }
  },
};
</script>

<style lang="scss"></style>
